import { memo } from "react";
import { OrganizationType } from "../../../../types/organization";
import { Image, Swiper } from "antd-mobile";
import OrgDetailSwiperStyle from "./styled";
import { LocationFill, PhoneFill } from "antd-mobile-icons";

const OrgDetail_swiper = memo((props: { data: OrganizationType }) => {
  const { data } = props;

  const imgData = data?.orgFrontImg?.concat(data?.orgRoomImg ?? []);
  return (
    <OrgDetailSwiperStyle>
      <h3>门店详情图片</h3>
      <Swiper autoplay loop>
        {imgData?.map((item, index) => (
          <Swiper.Item key={index}>
            <Image src={item.url} fit={"cover"} />
          </Swiper.Item>
        ))}
      </Swiper>
      <div className="contact">
        <div className="location">
          <LocationFill />
          <a
            href={`http://api.map.baidu.com/marker?location=${
              data?.latitude as string
            },${data?.longitude as string}&title=${
              data?.address as string
            }&output=html&content=${data?.name}`}
          >
            {data.address}
          </a>
        </div>
        <div className="phone">
          <a href={`tel:${data?.tel as string}`}>
            <PhoneFill />
          </a>
        </div>
      </div>
    </OrgDetailSwiperStyle>
  );
});

export default OrgDetail_swiper;
